//日常维修页面
import React, { useEffect, useState } from 'react';
import { Space, Table, Select, DatePicker, message, Modal } from 'antd';
import type { TableProps } from 'antd';
import '../../../css/oper_inspertion/search.less'
import { Outlet, useNavigate } from 'react-router-dom';
import { getDaily, deleteSingleResult } from '../../../../../api/csy/api'
interface DataType {
    key: string;
    name: string;
    yuan: string;
    finish: string;
    state: string;
    time: string;
    person: string;
    file: [string]
}



const DeviceList: React.FC = () => {

    //时间
    const [value, setValue] = useState('')
    //检查结果
    const [value1, setValue1] = useState('')
    //工作名称
    const [value2, setValue2] = useState('')
    const [data, setData] = useState<DataType[]>([])
    const navigate = useNavigate()
    const dianji = () => {
        navigate('/service/Operational/maintenance/DailyMaintenance/addDailyMaintenance')
    }


    const result = () => {
        getList()
    }

    const getList = () => {
        getDaily().then((res) => {
            if (res.data.code == 200) {
                setData(res.data.data)
            }
        })
    }
    useEffect(() => {
        getList()
    }, [])

    // 添加模态框相关状态
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [currentRecord, setCurrentRecord] = useState<any>(null);

    // 显示模态框
    const showModal = (record: any) => {
        setCurrentRecord(record);
        setIsModalVisible(true);
    };

    // 关闭模态框
    const handleCancel = () => {
        setIsModalVisible(false);
    };

    const columns: TableProps<DataType>['columns'] = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            render: (text, b, index) => {
                return index + 1
            }
        },
        {
            title: '工作名称',
            dataIndex: 'name',
            key: 'name',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '维修原因',
            dataIndex: 'yuan',
            key: 'yuan',
        },
        {
            title: '计划完成时间',
            dataIndex: 'finish',
            key: 'finish',
            //格式化时间
            render: (text) => {
                return text.slice(0, 10)
            }
        },
        {
            title: '状态',
            dataIndex: 'state',
            key: 'state',
        },
        {
            title: '完成时间',
            dataIndex: 'time',
            key: 'time',
            render: (text) => {
                return text.slice(0, 10)
            }
        },
        {
            title: '记录人员',
            dataIndex: 'person',
            key: 'person',
        },
        {
            title: '操作',
            key: 'action',
            render: (text, record) => (
                <>
                    {record.state == '已审核' ? (
                        <Space size="middle">
                            <a style={{ color: '#738ddf' }} onClick={() => showModal(record)}>查看</a>
                            <a style={{ color: '#f8b6b3' }} onClick={() => shanchu(record)}>删除</a>
                        </Space>
                    ) : record.state == '待审核' ? (
                        <Space size="middle">
                            <a style={{ color: '#e817a1' }} onClick={() => shen(record)}>审核</a>
                            <a style={{ color: '#738ddf' }} onClick={() => showModal(record)}>查看</a>
                            <a style={{ color: '#f8b6b3' }} onClick={() => shanchu(record)}>删除</a>
                        </Space>
                    ) : record.state == '待处理' ? (
                        <Space size="middle">
                            <a style={{ color: '#738ddf' }} onClick={() => showModal(record)}>查看</a>
                            <a onClick={() => diank(record)} style={{ color: '#fed08a' }}>处理</a>
                            <a style={{ color: '#f8b6b3' }} onClick={() => shanchu(record)}>删除</a>
                        </Space>
                    ) : null}
                </>
            ),
        }
    ];
    //处理函数
    const diank = (record: any) => {
        navigate('/service/Operational/maintenance/DailyMaintenance/addDailyMaintenance', { state: record._id })

    }
    //审核
    const shen = (record: any) => {
        navigate('/service/Operational/maintenance/DailyMaintenance/Audit', { state: record._id })
    }
    //删除
    const shanchu = (record: any) => {
        deleteSingleResult({ daily: record._id }).then((res) => {
            if (res.data.code == 200) {
                message.success('删除成功');
                getList();
            } else {
                message.error('删除失败');
            }
        })
    }
    const dian = () => {
        const newFilteredData = data.filter((item) => {
            const matchesDate = value === '' || value === item.finish.slice(0, 10);
            const matchesState = value1 === '' || value1 === item.state;
            const matchesName = value2 === '' || value2 === item.name;
            return matchesDate && matchesState && matchesName;
        });
        setData(newFilteredData); // 更新筛选后的数据状态
    };
    return (
        <>
            <div>
                <div className='search'>
                    <span>年份:
                        <DatePicker onChange={(value, date) => setValue(Array.isArray(date) ? date[0] : date)} picker="year" />
                    </span>
                    <span className='search_person'>
                        工作名称:
                        <input type="text" className='search_select' name="" value={value2} onChange={(e) => setValue2(e.target.value)} id="" />
                    </span>
                    <span className='search_person'>检查结果
                        <Select
                            className='search_select'
                            showSearch
                            placeholder="请选择"
                            filterOption={(input, option) =>
                                (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                            }
                            onChange={(value) => {
                                setValue1(value)
                            }}
                            options={[
                                { value: '待处理', label: '待处理' },
                                { value: '待审核', label: '待审核' },
                                { value: '已审核', label: '已审核' }
                            ]}
                        />
                    </span>
                    <button className='search_btn' onClick={dian}>查询</button>
                    <button className='reset' onClick={result}>重置</button>
                </div>
            </div>
            <div>
                <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '10px' }}>
                    <button style={{
                        display: 'inline-block',
                        width: '80px',
                        height: '30px',
                        lineHeight: '30px',
                        border: 'none',
                        color: '#1890ff', marginRight: '10px',
                    }} onClick={dianji}
                    >发起</button>
                </div>
                <Table<DataType> columns={columns} dataSource={data}
                    pagination={{
                        pageSize: 5, // 每页显示的条数
                        total: data.length, // 数据总数 
                    }}
                />
            </div>

            <Modal
                title="维修详情"
                visible={isModalVisible}
                onCancel={handleCancel}
                footer={null}
                width={600}
            >
                {currentRecord && (
                    <div className="maintenance-detail">
                        <div className="detail-item">
                            <span className="label">工作名称：</span>
                            <span className="value">{currentRecord.name}</span>
                        </div>
                        <div className="detail-item">
                            <span className="label">维修原因：</span>
                            <span className="value">{currentRecord.yuan}</span>
                        </div>
                        <div className="detail-item">
                            <span className="label">计划完成时间：</span>
                            <span className="value">{currentRecord.finish.slice(0, 10)}</span>
                        </div>
                        <div className="detail-item">
                            <span className="label">状态：</span>
                            <span className={`value status-${currentRecord.state}`}>{currentRecord.state}</span>
                        </div>
                        <div className="detail-item">
                            <span className="label">完成时间：</span>
                            <span className="value">{currentRecord.time.slice(0, 10)}</span>
                        </div>
                        <div className="detail-item">
                            <span className="label">记录人员：</span>
                            <span className="value">{currentRecord.person}</span>
                        </div>
                    </div>
                )}
            </Modal>
        </>
    )
};

export default DeviceList;
